<script setup lang="ts">
import "@pureadmin/table/dist/style.css";
import {PureTable} from "@pureadmin/table";
import {ref} from "vue";
import {useHook} from "@/views/utils/processhook";
import {PureTableBar} from "@/components/RePureTableBar";
import {useRenderIcon} from "@/components/ReIcon/src/hooks";
// 声明 tableData

const formRef = ref();
const tableRef = ref();
const {
  searchFormParams,
  loading,
  columns,
  dataList,
  onSearch,
  dataProcessList,
  checkProcessAndSyncData2
} = useHook();
</script>

<template>
  <div class="main">
    <!--  <el-table :data="tableData" border  cell-class-name="cellClassName" />-->
    <!--  <pure-table locale="zhCn" :data="dataList" :columns="columns" :pagination="pagination" />-->
    <PureTableBar
      title="菜单列表"
      :columns="columns"
      :tableRef="tableRef?.getTableRef()"
      @refresh="onSearch"
    >
      <template #buttons>
        <el-button type="primary" @click="checkProcessAndSyncData2"> 数据同步</el-button>
      </template>
      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          ref="tableRef"
          adaptive
          :adaptiveConfig="{ offsetBottom: 32 }"
          align-whole="center"
          row-key="id"
          showOverflowTooltip
          table-layout="auto"
          :loading="loading"
          :size="size"
          :data="dataProcessList"
          :columns="dynamicColumns"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }"
        >
          <template #operation="{ row }">


            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
            >
              编辑
            </el-button>
            <el-popconfirm
              :title="`是否确认删除菜单名称为${row.menuName}的这条数据`"
            >
              <template #reference>
                <el-button class="reset-margin" link type="danger" :size="size">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>
</template>

<style scoped>
.cellClassName {
  background-color: #f5f5f5;
}
</style>
